<template>
  <view class="app-container">
    <view class="topfloat"></view>
    <view
      class="top-content"
      style
    >
      <u-tabs-swiper
        style="position: fixed;"
        bg-color="linear-gradient(to left, #1040BE, #026DFF)"
        active-color="#ffffff"
        inactive-color="#ffffff"
        color="#ffffff"
        ref="uTabs"
        :list="list"
        :current="current"
        @change="tabsChange"
        :is-scroll="false"
        swiperWidth="750"
      ></u-tabs-swiper>
    </view>
    <!-- <view class="tops"> -->
    <view class="top">
      <view class="date">
        <image
          src="../../static/images/date2.png"
          @click="handleDate()"
          mode="aspectFit"
          class="image"
        />
        <view>
          <u-calendar
            v-model="show"
            @change="timechange"
            mode="range"
          ></u-calendar>
          <u-tag
            :text="date"
            @click="handleDate()"
            mode="plain"
            type="primary"
            shape="square"
          />
        </view>
      </view>
      <!-- system -->
      <u-input v-model="value" :border="true" placeholder="请输入计划名称" :clearable="true" />
      <u-button
        type="primary"
        size="mini"
        class="btn"
        style="margin-left:5rpx;margin-top:5rpx"
        @click="cancel"
      >重置</u-button>
    </view>

    <view class="box-contet">
      <swiper
        class="cardlist"
        :current="swiperCurrent"
        @transition="transition"
        @change="tabsChange2"
        @animationfinish="animationfinish"
      >
        <swiper-item
          class="swiper-item"
          v-for="(item,index) in 4"
          :key="index"
        >
          <scroll-view
            scroll-y
            @scrolltolower="handle"
            :lower-threshold="250"
            class="scrollHeight"
          >
            <scroll-view
              scroll-y
              style=" height:calc(100%); width: 100%"
              @scrolltolower="onreachBottom"
            >
              <view
                class
                style="height: 10rpx; color: #eee"
              ></view>
              <view
                class="card"
                v-if="secondNone"
              >
                <view
                  v-for="(item, index) in dataList1"
                  :key="index"
                >
                  <card
                    status="1"
                    :data="item"
                    :completed="swiperCurrent== 3 ? 'true' : 'false' "
                  />
                </view>
                <u-loadmore
                  :status="status"
                  :icon-type="iconType"
                  :load-text="loadText"
                />
              </view>
              <view
                class="fix"
                @click="handleShowSec"
              >
                <image src="../../static/images/saomiao.png" />
                <!-- <u-icon name="scan" color="white" size="66"></u-icon> -->
              </view>
            </scroll-view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>

    <view class="bottom">
      <u-popup
        v-model="hidden"
        :mask-close-able="false"
        mode="center"
        border-radius="14"
        width="600rpx"
        height="200px"
      >
        <view class="title">扫描产品</view>
        <view class="input">
          <u-form-item
            label-width="130"
            label="产品代码"
          >
            <u-input
            ref="input"
              v-model="sn"
              :focus="focus"
              :placeholder="search"
            />
          </u-form-item>
        </view>
        <view class="foot">
          <view class="btn">
            <u-button
              @click="back"
              :ripple="true"
              ripple-bg-color="#32afff"
            >返回</u-button>
          </view>
          <view
            class="btn"
            style="margin-left:30rpx"
          >
            <u-button
              @click="handleGo"
              type="primary"
              :ripple="true"
              ripple-bg-color="#32afff"
            >确认</u-button>
          </view>

        </view>
      </u-popup>
    </view>
    <u-toast ref="uToast" />
  </view>

  <!-- </view> -->
</template>

<script>
import WucTab from "@/components/wuc-tab/wuc-tab.vue";
import card from "@/components/preview/card.vue";
import {
  pointCheckTaskList,
  pointCheckTaskListProgress,
  deviceDeail,
  dataQuery
} from "@/api/index.js";
export default {
  components: {
    WucTab,
    card
  },
  watch: {
    value: {
      // 可以监听对象的单个属性
      handler(newval, oldval) {
        this.getList();
        // if (this.swiperCurrent == 1) {
        //   this.getList2();
        // } else {
        //   this.getList();
        // }
      },
      deep: true
    }
  },
  data() {
    return {
      focus:false,
      search: "请扫描产品代码",
      show: false,
      src: "../../static/images/nodata.png",
      status: "nomore",
      iconType: "flower",
      loadText: {
        loadmore: "暂无数据",
        loading: "努力加载中",
        nomore: "没有更多数据",
        data: "加载更多数据"
      },
      datashow: false,
      hidden: false,
      value: "",
      tabs: [
        {
          name: 123
        }
      ],
      list: [
        {
          name: "未开始"
        },
        {
          name: "进行中"
        },
        {
          name: "已超时"
        },
        {
          name: "已完成"
        }
      ],
      sn: "",
      completed: false,
      firstNone: true,
      secondNone: true,
      thirdNone: true,
      // 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
      dataList1: [],
      startdata: 0,
      enddata: 0,
      date: "",
      startTime: "",
      endtime: "",
      ListProgress: false,
      completed1: false,
      timer: null,
      roleKey: ""
    };
  },
  onReachBottom() {},
  onPullDownRefresh() {
    setTimeout(function() {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  // onLaunch(){
  //   console.log('333333333333333')
  // },
  onShow: function() {
    if (this.roleKey == "Inspector") {
      this.timer = setInterval(function() {
        _this.callpolice();
      }, 1000);
    } else {
    }

    // if (!this.date) this.date = '当天数据'
    if (this.swiperCurrent == 0) {
      this.date = "当天数据";
    }

    if (this.roleKey == "Inspector") {
      this.getList();
    } else {
    }
    let _this = this;
  },
  onHide() {
    clearInterval(this.timer);
    this.timer = 0;
  },
  onLoad: function(val) {
    this.date = "当天数据";
        this.getList();
    uni.startPullDownRefresh();
    this.roleKey = uni.getStorageSync("roleKey");

    if (this.roleKey == "Installer") {
      uni.setTabBarItem({
        index: 0,
        visible: false
      });
      uni.setTabBarItem({
        index: 1,
        visible: false
      });
    } else {
       uni.setTabBarItem({
        index: 0,
        visible: true
      });
      uni.setTabBarItem({
        index: 1,
        visible: true
      });
    }
  },
  methods: {
    callpolice() {
      const code = "alarm_summary";
      let number = 0;
      dataQuery({}, code).then(res => {
        res.forEach(item => {
          if (item.label === "notRecovered") {
            if (item.value) {
              uni.showTabBarRedDot({
                index: 1
              });
            } else {
              uni.removeTabBarBadge({
                index: 1
              });
            }
          } else {
            uni.removeTabBarBadge({
              index: 1
            });
          }
        });
      });
    },
    tabsChange2(e) {
      // console.log(e);
      // this.swiperCurrent = e.target.current;
      // let index = this.swiperCurrent;
      // this.startTime = "";
      // this.endtime = "";
      // this.value = "";
      // if (index == 0) {
      //   this.date = "当天数据";
      //   this.getList();
      // } else if (index == 1) {
      //   this.date ='所有数据'
      //   this.getList2();
      // } else if (index == 2) {
      //   this.date = "所有数据";
      //   this.getList();
      // } else if (index == 3) {
      //   this.startTime = new Date().toISOString().slice(0, 10);
      //   this.endtime = new Date().toISOString().slice(0, 10);
      //   this.date =
      //     new Date().toISOString().slice(0, 10) +
      //     "至" +
      //     new Date().toISOString().slice(0, 10);
      //   this.getList();
      // }
    },
    handle() {},
    getList() {
      this.datashow = false;
      uni.showLoading({
        title: "加载中"
      });
      const data2 = {
        pageNum: 1,
        pageSize: this.enddata + 4,
        status: this.swiperCurrent,
        startTimeBegin: this.startTime + " " + "00:00:00",
        startTimeEnd: this.endtime + " " + "23:59:59",
        keyValue: this.value,
        isAsc: "desc",
        orderByColumn: "startTime"
      };
      if (this.swiperCurrent == 0) {
        data2.status = "0";
      }
      // console.log(this.completed);
      // console.log(data2);
      // console.log(this.ListProgress);
      pointCheckTaskList(data2).then(res => {
        if (res.total > data2.pageSize) {
          this.status = "loadmore";
        } else if (res.total == 0) {
          this.status = "loadmore";
          this.datashow = true;
        } else {
          this.status = "nomore";
        }
        this.dataList1 = res.rows;
        uni.hideLoading();
      });
    },
    getList2() {
      this.datashow = false;
      uni.showLoading({
        title: "加载中"
      });
      const data2 = {
        pageNum: 1,
        pageSize: this.enddata + 4,
        status: this.swiperCurrent,
        startTimeBegin: this.startTime + " " + "00:00:00",
        startTimeEnd: this.endtime + " " + "23:59:59",
        keyValue: this.value,
        isAsc: "desc",
        orderByColumn: "startTime"
      };
      console.log(data2);
      pointCheckTaskListProgress(data2).then(res => {
        // console.log(res.data.length)
        if (res.data.length > data2.pageSize) {
          this.status = "loading";
          console.log(this.status);
        } else if (res.data.length == 0) {
          this.status = "loadmore";
          this.datashow = true;
        } else {
          this.status = "nomore";
        }
        // const newdata = res.rows.slice(data2.startdata, data2.enddata - 1)
        this.dataList1 = res.data;
        this.dataList1.slice(0, data2.pageSize);
        // console.log(data2.pageSize)
        // console.log(this.dataList1)
        uni.hideLoading();
      });
    },
    tabsChange(index) {
      // console.log('11111111111111')
      this.swiperCurrent = index;
      this.startTime = "";
      this.endtime = "";
      this.value = "";
      if (index == 0) {
        this.date = "当天数据";
        this.getList();
      } else if (index == 1) {
        this.date ='所有数据'
        this.getList();
      } else if (index == 2) {
        this.date = "所有数据";
        this.getList();
      } else if (index == 3) {
        this.startTime = new Date().toISOString().slice(0, 10);
        this.endtime = new Date().toISOString().slice(0, 10);
        this.date =
          new Date().toISOString().slice(0, 10) +
          "至" +
          new Date().toISOString().slice(0, 10);
        this.getList();
      }
    },
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.current = current;
    },
    // scroll-view到底部加载更多
    onreachBottom() {
      this.status = "loading";
      this.enddata = this.enddata + 5;
      if (this.swiperCurrent == 1) {
        this.getList2();
      } else {
        this.getList();
      }
    },
    handleDate() {
      this.show = true;
    },
    onClick() {},
    change(index) {
      console.log(index);
      this.enddata = 0;
      this.swiperCurrent = index.detail.current;
      // this.getList()
    },
    timechange(e) {
      this.startTime = e.startDate;
      this.endtime = e.endDate;
      this.date = this.startTime + "至" + this.endtime;
      console.log(this.date);
      console.log(this.swiperCurrent);
      if (this.swiperCurrent == 1) {
        this.getList2();
      } else {
        this.getList();
      }
    },
    cancel() {
      this.startTime = "";
      this.endtime = "";
      if (this.swiperCurrent == 1) {
        this.date = "所有数据";
        this.getList2();
      } else if (this.swiperCurrent == 0) {
        this.date = "当天数据";
        this.getList();
      } else {
        this.date = "所有数据";
        this.getList();
      }
    },
    onNavigationBarButtonTap(e) {
      if (e.text === "异常记录") {
        uni.navigateTo({
          url: "/pages/preview/productExceptionRecord?"
        });
      } else {
        uni.navigateTo({
          url: "/pages/alarm/index?"
        });
      }
    },
    // 扫描按钮
    handleShowSec() {
      this.search = "请扫描产品代码";
      this.hidden = true;
      this.focus = true
    },
    back() {
      this.sn = "";
      this.hidden = false;
      this.focus = false
    },
    // 确认按钮
    handleGo() {
      if (this.sn) {
        const data = {
          sn: this.sn
        };
        deviceDeail(data).then(res => {
          console.log(res);
          if (res.data.id) {
            const timeone = res.data.startTime.split(" ")[0];
            const timetwo = res.data.startTime.split(" ")[1];
            const hour = timetwo.split(":")[0];
            const minute = timetwo.split(":")[1];
            const second = timetwo.split(":")[2];
            const projectId = res.data.projectId;
            uni.navigateTo({
              url:
                "/pages/detail/detail?taskDeviceId=" +
                res.data.taskDeviceId +
                "&Id=" +
                res.data.id +
                "&timeone=" +
                timeone +
                "&hour=" +
                hour +
                "&minute=" +
                minute +
                "&second=" +
                second +
                "&productId=" +
                res.data.productId +
                "&projectId=" +
                projectId
            });
            this.sn = "";
          } else {
            this.$refs.uToast.show({
              title: "该产品当前没有需要执行的点检任务",
              type: "default",
              duration:4000
            });
            this.sn = "";
          }
        });
        this.hidden = false;
      } else {
        this.search = "产品代码不能为空";
      }
      // uni.navigateTo({
      // 	url: '/pages/detail/detail'
      // })
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .uni-page-head-ft {
  color: red !important;
}
/deep/ .uni-tabbar__reddot {
  width: 9px !important;
  height: 9px !important;
}
.bottom {
  .title {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin-top: 10px;
  }
  .input {
    width: 100%;
    padding: 20rpx 50rpx 10rpx;
  }
  .foot {
    display: flex;
    // margin-left:-34rpx;
    .btn {
      flex: 1;
      margin: 60rpx 50rpx 0rpx;
    }
  }
}
.app-container {
  position: relative;
  height: 100%;
  .top-content {
    height: 160upx;
    background: linear-gradient(to left, #1040be, #026dff);
  }
  .box-contet {
    height: calc(100% - 180upx);
    margin-top: 20rpx;
    .cardlist {
      height: 100%;
      .swiper-item {
        height: 100%;
      }
    }
  }
}
.date {
  margin-right: 10rpx;
  display: flex;
  align-items: center;

  image {
    width: 50rpx;
    height: 50rpx;
  }
}
.top {
  z-index: 10;
  position: absolute;
  padding: 30rpx 30rpx 18rpx 30rpx;
  width: 100%;
  top: 100rpx;
  background-color: white;
  display: flex;
  border-radius: 40rpx 40rpx 0 0;

  .btn {
    position: absolute;
    right: 35rpx;
    border-radius: 16rpx;
  }
  /deep/ .u-btn--primary {
    background: linear-gradient(to left, #1040be, #026dff);
  }
  /deep/ .uni-input-placeholder {
    font-size: 22rpx;
    color: #989898 !important;
    // line-height:100upx;
  }
  /deep/ .u-mode-plain-primary {
    border: 1px solid #eee;
    box-shadow: 0 0 20rpx #eee;
    border-radius: 16rpx;
    color: #989898;
  }
  /deep/ .uni-page-head-ft {
    color: red !important;
  }
  /deep/ .u-flex {
    margin-right: 80rpx;
  }
  .image {
    position: absolute;
    width: 28rpx;
    height: 34rpx;
    left: 45rpx;
    // height: 80upx;
  }
  /deep/ .u-size-default {
    padding: 18rpx 24rpx 18rpx 50rpx;
  }
  /deep/ .u-input--border {
    border: 1px solid #eee !important;
    box-shadow: 0 0 20rpx #eee;
    border-radius: 16rpx;
    // color: #989898 !important;
    // height: 60upx;
    // line-height: 20upx;
  }
  /deep/ .u-input__input {
    min-height: 55upx !important;
    color: #989898 !important;
  }
}

.cardlist {
  background: #ffffff;
}
.scrollHeight {
  height: 100%;
}
.card {
  width: 100%;
  padding: 30rpx;
}
// .topfloat{
//    /* #ifndef APP-PLUS-NVUE */
// 	display: flex;
// 	position: -webkit-sticky;
// 	/* #endif */
// 	position: sticky;
// 	top: var(100% -100);
// 	z-index: 999999999;
// 	flex-direction: row;
// 	margin: -34rpx 40rpx +34rpx 0rpx;
// }
/deep/ .u-drawer-content {
  height: 90% !important;
}
/deep/ .u-calendar__bottom__choose {
  height: 0rpx !important;
}
/deep/.uni-btn-icon {
  color: red;
}
.fix {
  position: fixed;
  bottom: 100rpx;
  right: 40rpx;
  z-index: 9999;
  bottom: 0rpx;
  image {
    height: 120rpx;
    width: 120rpx;
  }
}
</style>
